<%@ page import="com.foodie.service.UserService" %>
<%@ page import="com.foodie.entity.User" %><%--
  Created by IntelliJ IDEA.
  User: 我是你爸爸
  Date: 2021/5/21
  Time: 19:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="<%=request.getContextPath()%>/js/jQuery.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.7/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.7/dist/layui.js"></script>
    <title>ces</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #demo {
        margin: 10px;
    }

    .box {
        padding: 5px;
        background-color: #e5f1ee;
        margin: 10px 10px;
        display: inline-block;
        width: 227px;
        height: 302px;
        box-shadow: gray 0px 0px 10px;
        text-align: left;
    }

    .img {
        width: 100%;
        height: 100%;
    }

    .nav-top {
        display: inline-block;
        text-align: center;
        padding: 2px;
        font-size: 0.9em;
        color: #1E9FFF;

    }

    .pic {
        text-align: center;
        background-color: #e5f1ee;
    }

    .nav-bonn {
        display: inline-block;
        text-align: left;
        padding: 2px;
    }
</style>
<body>
<div style="background-color: #d3dfef">
<%@include file="currency/head.jsp"%>


    <div style="display: flex">

        <div style="flex: 1"></div>
        <div style="flex: 8 ;text-align: center; background-color: #b0bfbd" id="menu">
            <div style="display: flex">
                <div style="flex: 2"></div>
                <div style="flex: 6 ;">
                    <h3 style="font-weight: bolder;text-align: center">今日推荐</h3>
                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            <div class="pic" id="xxx" style="text-align: left"></div>
                            <div class="pic" id="x" style="text-align: left"></div>
                            <div class="pic" id="xx" style="text-align: left"></div>
                        </div>
                    </div>
                </div>
                <div style="flex: 2"></div>
            </div>
            <h3 style="text-align: center;font-weight: bolder">热门美食</h3>
            <p style="border-bottom: 0.7px gray solid;text-align: right "><a href="<%= request.getContextPath()%>/whole.jsp">更多美食</a></p>

        </div>
        <div style="flex: 1"></div>
    </div>
</div>

</body>
<%@include file="currency/base.jsp" %>
<script src="/static/build/layui.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            , autoplay: 'true'
            , interval: '3000'
            , height: '346px'
            , indicator: 'outside'
        });
    });
    layui.use('element', function () {
        var element = layui.element;
    });

    function xx() {
        // 连接Ajax
        $.ajax({
            url: '<%=request.getContextPath()%>/cre',
            type: 'GET',
            success: function (res) {
                for (var i = 0; i <= 2; i++) {
                    console.log(res);
                    $('#xxx').append(`
    <div class="box">

     <div style="height: 200px" ;border: 1px solid red><img class="img" src="${res[i].IMAGE}" alt=""></div>

        <div style=" position: relative;"> <span style="position: absolute;top: 1px;left:1px ;">简介：</span><br> ${res[i].MENU_INTRODUCE}</div>
        <div style="position: relative;top: 26px">

            <div id="nav" style="display: flex">
                <div class="nav-bonn" style="flex: 1">菜品名:</div>
                <div class="nav-bonn" style="flex: 1">作者:</div>
                <div class="nav-bonn" style="flex: 1">浏览量:</div>
            </div>
            <div id="xxx" style="display: flex">
                <div class="nav-top" style="flex: 1">${res[i].MENU_NAME} </div>
                <div class="nav-top" style="flex: 1">${res[i].USER_NAME}</div>
             <div class="nav-top" style="flex: 1">${res[i].VIEW}</div>
         </div>
     </div>
    </div>`)
                }
            }
        })
    };
    xx()

    function x() {
        // 连接Ajax
        $.ajax({
            url: '<%=request.getContextPath()%>/cre',
            type: 'GET',
            success: function (res) {
                for (var i = 3; i <= 5; i++) {
                    console.log(res);
                    $('#x').append(`
    <div class="box">
     <div style="height: 200px" ;border: 1px solid red><img class="img" src="${res[i].IMAGE}" alt=""></div>

        <div style=" position: relative;"> <span style="position: absolute;top: 1px;left:1px ;">简介：</span><br> ${res[i].MENU_INTRODUCE}</div>
        <div style="position: relative;top: 26px">

            <div id="nav" style="display: flex">
                <div class="nav-bonn" style="flex: 1">菜品名:</div>
                <div class="nav-bonn" style="flex: 1">作者:</div>
                <div class="nav-bonn" style="flex: 1">浏览量:</div>
            </div>
            <div id="xxx" style="display: flex">
                <div class="nav-top" style="flex: 1">${res[i].MENU_NAME} </div>
                <div class="nav-top" style="flex: 1">${res[i].USER_NAME}</div>
             <div class="nav-top" style="flex: 1">${res[i].VIEW}</div>
         </div>
     </div>
    </div>`)
                }
            }
        })
    };
    x()

    function xxx() {
        // 连接Ajax
        $.ajax({
            url: '<%=request.getContextPath()%>/cre',
            type: 'GET',
            success: function (res) {
                for (var i = 6; i <= 8; i++) {
                    console.log(res);
                    $('#xx').append(`
    <div class="box">
     <div style="height: 200px" ;border: 1px solid red><img class="img" src="${res[i].IMAGE}" alt=""></div>
        <div style=" position: relative;"> <span style="position: absolute;top: 1px;left:1px ;">简介：</span><br> ${res[i].MENU_INTRODUCE}</div>
        <div style="position: relative;top: 26px">

            <div id="nav" style="display: flex">
                <div class="nav-bonn" style="flex: 1">菜品名:</div>
                <div class="nav-bonn" style="flex: 1">作者:</div>
                <div class="nav-bonn" style="flex: 1">浏览量:</div>
            </div>
            <div id="xxx" style="display: flex">
                <div class="nav-top" style="flex: 1">${res[i].MENU_NAME} </div>
                <div class="nav-top" style="flex: 1">${res[i].USER_NAME}</div>
             <div class="nav-top" style="flex: 1">${res[i].VIEW}</div>
         </div>
     </div>
    </div>`)
                }
            }
        })
    };
    xxx()

    function menu() {
        // 连接Ajax
        $.ajax({
            url: '<%=request.getContextPath()%>/cre',
            type: 'GET',
            success: function (res) {
                for (var i = 0; i < res.length; i++) {
                    console.log(res);
                    $('#menu').append(`
    <div class="box">
     <div style="height: 200px" ;border: 1px solid red><img class="img" src="${res[i].IMAGE}" alt=""></div>

        <div style=" position: relative;"> <span style="position: absolute;top: 1px;left:1px ;">简介：</span><br>${res[i].MENU_INTRODUCE}</div>
        <div style="position: relative;top: 26px">

            <div id="nav" style="display: flex">
                <div class="nav-bonn" style="flex: 1">菜品名:</div>
                <div class="nav-bonn" style="flex: 1">作者:</div>
                <div class="nav-bonn" style="flex: 1">浏览量:</div>
            </div>
            <div id="xxx" style="display: flex">
                <div class="nav-top" style="flex: 1">${res[i].MENU_NAME} </div>
                <div class="nav-top" style="flex: 1">${res[i].USER_NAME}</div>
             <div class="nav-top" style="flex: 1">${res[i].VIEW}</div>
         </div>
     </div>
    </div>`)
                    if ((i+1) % 4 == 0) {
                        $('#menu').append(`
                <br>
                `)

                    }

                }
            }
        })
    }
    ;
    menu();
</script>
</html>
